<template>
  <div class="coupon">
    <div class="biaoti">
      <img src="../../../assets/img/返回.png" @click="Jumpback" alt />
      <div class="youhui">优惠券</div>
    </div>
    <div class="neirong">
      <div class="first">优惠券</div>
      <div class="xinxi">
        <img src="../../../assets/img/信息.png" alt />
      </div>
      <div class="guize">使用规则</div>
      <!-- 第一个div -->
      <div class="quan">
        <div class="ig">
          <img src="../../../assets/img/coupon图标.png" alt />
        </div>
        <div class="b1">现金消费抵用券</div>
        <div class="b2">有效期至</div>
        <div class="b3">2020-06-30</div>
        <div class="money">
          <img src="../../../assets/img/money.png" alt />
          <div class="qian">100</div>
          <div class="xiangqin">查看规则详情</div>
        </div>
      </div>
      <!-- 第二个div -->
      <div class="quan2">
        <div class="ig">
          <img src="../../../assets/img/coupon图标.png" alt />
        </div>
        <div class="b1">满减消费抵用券</div>
        <div class="b2">有效期至</div>
        <div class="b3">2020-06-30</div>
        <div class="money">
          <img src="../../../assets/img/money.png" alt />
          <div class="qian">300</div>
          <div class="xiangqin1">查看规则详情</div>
        </div>
      </div>
      <div class="quan2">
        <div class="ig">
          <img src="../../../assets/img/coupon图标.png" alt />
        </div>
        <div class="b1">单品折扣券</div>
        <div class="b2">有效期至</div>
        <div class="b3">2020-06-30</div>
        <div class="money">
          <span class="sp"></span>
          <div class="qian1">
            <span>7</span>
            <span class="ling">.0</span>
            <span class="dazhe">折</span>
          </div>
          <div class="xiangqin3">查看规则详情</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {_getUserCoupon} from '../../../service/coupon.js'

export default{
    data(){
        return{

        }
    },
    mounted(){
        this.getdata()
    },
    methods:{
      Jumpback(){
        this.$router.go(-1)
      },
        getdata(){
            let _this=this
            let uid=JSON.parse(localStorage.getItem('user')).user_id
            _getUserCoupon(uid).then(res=>{
                console.log(res)
            })
        }
    }
}
</script>
<style scoped>
.coupon {
  width: 100%;
  height: 100%;
  background-color: rgb(248, 248, 248);
}
.ling {
  font-size: 18px;
  font-family: "DINPro Medium";
  font-weight: 1000;
}
.sp{
    display:inline-block;
    width: 11px;
}
.dazhe {
  font-size: 12px;
  position: relative;
  left: 40px;
  top: -55px;
  font-weight: 1000;
}
.biaoti {
  height: 48px;
}
.biaoti img {
  width: 9px;
  height: 17px;
  margin: 13.5px 0 0 15px;
}
.youhui {
  line-height: 24px;
  width: 60px;
  height: 17px;
  font-size: 18px;
  font-weight: 1000;
  position: absolute;
  left: 161px;
  top: 13.5px;
}
.first {
  line-height: -55px;
  margin: 0 0 0 15px;
  font-size: 15px;
  padding-top: 27.5px;
  font-weight: 1000px;
}
.xinxi img {
  width: 12px;
  height: 12px;
  margin: -40px 0 0 284.3px;
}
.guize {
  width: 50px;
  height: 11.5px;
  font-size: 12px;
  margin: -37px 0 0 301.5px;
  color: rgb(174, 174, 174);
}
.quan {
  width: 345px;
  height: 74px;
  margin: 15px 0 0 15px;
  background-color: #fff;
  box-shadow: 3px 3px 1px rgb(227, 227, 227);
}
.quan2 {
  width: 345px;
  height: 74px;
  margin: 10px 0 0 15px;
  background-color: #fff;
  box-shadow: 3px 3px 1px rgb(227, 227, 227);
}
.ig img {
  width: 24px;
  height: 18px;
  margin: 28px 0 0 28px;
}
.b1 {
  margin: -35px 0 0 80px;
  font-size: 15px;
  font-weight: 500;
}
.b2 {
  margin: 10px 0 0 80px;
  font-size: 12px;
  color: rgb(102, 102, 102);
}
.b3 {
  margin: -17px 0 0 130px;
  font-size: 12px;
  color: rgb(102, 102, 102);
}
.money img {
  width: 11px;
  height: 17px;
  margin: -85px 0 0 245.5px;
}
.qian {
    width: 30px;
  font-size: 36px;
  font-family: "DINPro Medium";
  color: rgb(51, 51, 51);
  position: relative;
  top: -82px;
  left: 260px;
}
.qian1 {
  width: 30px;
  font-size: 36px;
  font-family: "DINPro Medium";
  color: rgb(51, 51, 51);
  position: relative;
  top: -82px;
  left: 270px;
}
.xiangqin {
  float: right;
  margin: -92px 16px 0 0;
  color: rgb(174, 174, 174);
  font-weight: inherit;
}
.xiangqin1 {
  float: right;
  margin: -92px 16px 0 0;
  color: rgb(174, 174, 174);
}
.xiangqin2 {
  float: right;
  color: rgb(174, 174, 174);
}
.xiangqin3{
    float: right;
    position: relative;
    top: -145px;
    right: 15px;
  color: rgb(174, 174, 174);
}
</style>